<template>
  <div class="boxs">
    <van-nav-bar left-arrow class="cinema-title" @click-left="onClickLeft" fixed></van-nav-bar>
    <div class="banner"></div>
    <div class="big-box">
      <div class="upper">
        <p class="p1">后来的我们</p>
        <p class="p2">今天2月1日 {{lists.time}} {{lists.type}}</p>
        <p class="p2">{{infos.title}}</p>
        <p class="p2">{{lists.room}} {{objs}}</p>
      </div>
      <div class="lower">
        <div class="lower-block">
          <p class="left">电影优惠券</p>
          <p class="right yellow">一张优惠券可用 〉</p>
        </div>
        <div class="lower-block">
          <p class="left">会员卡</p>
          <p class="right yellow">去使用 〉</p>
          <!-- <img src="@/assets/images/order/tip.png" class="tip" alt=""> -->
        </div>
        <div class="lower-block">
          <p class="left">票价总计</p>
          <p class="right red">{{current}} <span>元</span> </p>
        </div>
        <div class="lower-block">
          <p class="left">手机号</p>
        </div>
        <div class="lower-block card">
          <p class="right">购票成功后将收到取票码</p>
          <p class="right">18577778888</p>
        </div>
      </div>
      <div class="foot">
        <div class="foot-block">
          <p class="foot-left">
            查看退票 、改签协议
            <img src="@/assets/images/order/tip.png" class="tip" alt />
          </p>
          <p class="foot-right">
            还需支付：<span style="color:#c21313">{{current}}</span> <span class="yuan">元</span>
            <img src="@/assets/images/order/tip.png" class="tip" alt />
          </p>
        </div>
        <div class="confirm">确认订单</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      current:0,
      objs:{},
    };
  },
  computed: {
    ...mapState({
      infos: function(state) {
        return state.arr.find(ele => ele.id == this.$route.params.id);
      }
    }),
    ...mapState({
      lists: function(state) {
        return state.list.find(ele => ele.id == this.$route.params.id);
      }
    }),
  
    
  },
  created() { 
    this.current=this.$store.state.bill.toFixed(2);
    this.objs=this.$store.state.obj.join(' ');
  },
  mounted() {},
  methods: {
    onClickLeft() {
    //   this.$router.push({
    //     name: "cinemaSeat"
    //   });
      this.$router.go(-1);
    },
    
  }
};
</script>

<style scoped lang="scss">
.van-nav-bar {
  background-color: transparent!important;
}
[class*="van-hairline"]::after {
  border: 0;
}
.banner {
  width: 100%;
  height: 253px;
  background: url(~@/assets/images/order/order.png) no-repeat center;
  background-size: 375px 253px;
}
.upper {
  width: 100%;
 
  margin: 0 auto;
  text-align: left;
  transform: translateY(-190px);
  padding-bottom: 40px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  border-bottom: 1px dashed #fff;
  .p1 {
    font-size: 24px;
    color: #ffffff;
  }
  .p2 {
    font-size: 14px;
    color: #dfdfdf;
    margin-top: 15px;
  }
}
.lower {
  width: 90%;
  background-color: #33363d;
  margin: 0 auto;
  border-radius: 6px;
  padding-bottom: 19px;
  transform: translateY(-178px);
  .lower-block {
    display: flex;
    justify-content: space-between;
    padding: 0 3px;
    .left {
      font-size: 16px;
      color: #ffffff;
      margin: 15px;
      //   margin-top: 15px;
    }
    .right {
      font-size: 12px;
      color: #ffffff;
        margin-top: 15px;
    }
    .right.yellow {
      color: #f9c34a;
    }
    .right.red {
      color: #c21313;
      font-size: 20px;
      margin: 7px 0;
      span{
        font-size: 12px;
      }
    }
  }
}
.lower-block.card {
  margin-top: -22px;
  margin-left: 6px;
  font-size: 12px;
}
// 底部
.foot {
  width: 100%;
  height: 145px;
  position:fixed;
bottom: 0;
left: 0;
// transform: translateY(-100px);
  background-color: #33363d;
z-index: 60;
  .foot-block {
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: #dfdfdf;
    margin-top: 10px;
    .foot-left {
      font-size: 12px;
      margin-left: 20px;
    }
    .foot-right {
      font-size: 16px;
      transform: translate(-20px);
       
      .yuan{
        font-size:12px;
        border:0;
        width:15px;
        color:#c21313 ;
      }
    }
  }
}
.tip {
  width: 18px;
  height: 18px;
  transform: translate(3px, 5px) rotate(90deg);
}
.confirm {
  width: 335px;
  height: 40px;
  background: linear-gradient(
    150deg,
    rgba(242, 91, 134, 1) 0%,
    rgba(241, 172, 94, 1) 100%
  );
  box-shadow: 0px 0px 4px 1px rgba(242, 109, 125, 0.18);
  border-radius: 6px;
  margin: 0 auto;
  font-size:18px;
  color: #FFFFFF;
  line-height: 40px;
  margin-top: 30px;
}
.big-box{
    position: relative;
}

</style>
